<template>
  <div
    class="widget-view"
    :class="{
      active: selectWidget.key == element.key,
    }"
    @click.stop="handleSelectWidget(index)"
  >
    <template v-if="element && element.type === 'divider'">
      <el-divider
        v-if="element && element.key"
        :direction="element.options.direction || 'horizontal'"
        :content-position="element.options.position || 'center'"
      >
        {{ element.name }}
      </el-divider>
    </template>
    <template v-else>
      <el-form-item
        v-if="element && element.key"
        :class="{
          active: selectWidget.key == element.key,
          is_req: element.options.required,
        }"
        :label="element.name"
      >
        <template v-if="element.type == 'input'">
          <el-input
            v-model="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :placeholder="element.options.placeholder"
            :disabled="element.options.disabled"
          ></el-input>
        </template>

        <template v-if="element.type == 'textarea'">
          <el-input
            type="textarea"
            :rows="5"
            v-model="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :disabled="element.options.disabled"
            :placeholder="element.options.placeholder"
          ></el-input>
        </template>

        <template v-if="element.type == 'number'">
          <el-input-number
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
            :controls-position="element.options.controlsPosition"
            :style="{ width: element.options.width }"
          ></el-input-number>
        </template>

        <template v-if="element.type == 'radio'">
          <el-radio-group
            v-model="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :disabled="element.options.disabled"
          >
            <el-radio
              :style="{
                display: element.options.inline ? 'inline-block' : 'block',
              }"
              :label="item.value"
              v-for="(item, index) in element.options.options"
              :key="item.value + index"
            >
              {{ element.options.showLabel ? item.label : item.value }}
            </el-radio>
          </el-radio-group>
        </template>

        <template v-if="element.type == 'checkbox'">
          <el-checkbox-group
            v-model="element.options.defaultValue"
            :style="{ width: element.options.width }"
            :disabled="element.options.disabled"
          >
            <el-checkbox
              :style="{
                display: element.options.inline ? 'inline-block' : 'block',
              }"
              :label="item.value"
              v-for="(item, index) in element.options.options"
              :key="item.value + index"
            >
              {{ element.options.showLabel ? item.label : item.value }}
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <template v-if="element.type == 'time'">
          <el-time-picker
            v-model="element.options.defaultValue"
            :is-range="element.options.isRange"
            :placeholder="element.options.placeholder"
            :start-placeholder="element.options.startPlaceholder"
            :end-placeholder="element.options.endPlaceholder"
            :readonly="element.options.readonly"
            :disabled="element.options.disabled"
            :editable="element.options.editable"
            :clearable="element.options.clearable"
            :arrowControl="element.options.arrowControl"
            :style="{ width: element.options.width }"
          >
          </el-time-picker>
        </template>

        <template v-if="element.type == 'date'">
          <el-date-picker
            v-model="element.options.defaultValue"
            :type="element.options.type"
            :is-range="element.options.isRange"
            :placeholder="element.options.placeholder"
            :start-placeholder="element.options.startPlaceholder"
            :end-placeholder="element.options.endPlaceholder"
            :readonly="element.options.readonly"
            :disabled="element.options.disabled"
            :editable="element.options.editable"
            :clearable="element.options.clearable"
            :style="{ width: element.options.width }"
          >
          </el-date-picker>
        </template>

        <template v-if="element.type == 'rate'">
          <el-rate
            v-model="element.options.defaultValue"
            :max="element.options.max"
            :disabled="element.options.disabled"
            :allow-half="element.options.allowHalf"
          ></el-rate>
        </template>

        <template v-if="element.type == 'color'">
          <el-color-picker
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
            :show-alpha="element.options.showAlpha"
          ></el-color-picker>
        </template>

        <template
          v-if="element.type == 'select' || element.type == 'refusecode'"
        >
          <template v-if="element.options.remote && element.options.isObject">
            <el-select
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :multiple="element.options.multiple"
              :clearable="element.options.clearable"
              :placeholder="element.options.placeholder"
              :style="{ width: element.options.width }"
            >
              <el-option
                v-for="item in element.options.options"
                :key="item.value"
                :value="item"
                :value-key="item.value"
                :label="element.options.showLabel ? item.label : item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-select
              v-model="element.options.defaultValue"
              :disabled="element.options.disabled"
              :multiple="element.options.multiple"
              :clearable="element.options.clearable"
              :placeholder="element.options.placeholder"
              :style="{ width: element.options.width }"
            >
              <el-option
                v-for="item in element.options.options"
                :key="item.value"
                :value="item.value"
                :label="element.options.showLabel ? item.label : item.value"
              ></el-option>
            </el-select>
          </template>
        </template>

        <template v-if="element.type == 'switch'">
          <el-switch
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
          >
          </el-switch>
        </template>
        <!--  -->
        <template v-if="element.type == 'slider'">
          <el-slider
            v-model="element.options.defaultValue"
            :min="element.options.min"
            :max="element.options.max"
            :disabled="element.options.disabled"
            :step="element.options.step"
            :show-input="element.options.showInput"
            :range="element.options.range"
            :style="{ width: element.options.width }"
          ></el-slider>
        </template>
        <!-- 图片 -->
        <template v-if="element.type == 'imgupload'">
          <fm-upload
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
            :style="{ width: element.options.width }"
            :width="element.options.size.width"
            :height="element.options.size.height"
            token="xxx"
            domain="xxx"
          >
          </fm-upload>
        </template>

        <template v-if="element.type === 'fileupload'">
          <new-hope-upload
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
            :style="{ width: element.options.width }"
            :width="element.options.size.width"
            :height="element.options.size.height"
            :size="element.options.fileSize"
            :type="element.options.fileType"
            :remote="remote"
          />
        </template>

        <template v-if="element.type === 'cascader'">
          <el-cascader
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
            :clearable="element.options.clearable"
            :placeholder="element.options.placeholder"
            :style="{ width: element.options.width }"
            :options="element.options.remoteOptions"
          >
          </el-cascader>
        </template>
        <!-- 编辑器 -->
        <template v-if="element.type === 'editor'">
          <vue-editor
            v-model="element.options.defaultValue"
            :style="{ width: element.options.width }"
          >
          </vue-editor>
        </template>

        <template v-if="element.type == 'blank'">
          <div
            style="
              height: 50px;
              color: #999;
              background: #eee;
              line-height: 50px;
              text-align: center;
            "
          >
            {{ $t('fm.components.fields.blank') }}
          </div>
        </template>

        <template v-if="element.type == 'text'">
          <span>{{ element.options.defaultValue }}</span>
        </template>
      </el-form-item>
    </template>

    <!-- operation -->
    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <i
        class="iconfont icon-icon_clone"
        @click.stop="handleWidgetClone(index)"
      ></i>
      <i
        class="iconfont icon-trash"
        @click.stop="handleWidgetDelete(index)"
      ></i>
    </div>

    <div class="widget-view-drag" v-if="selectWidget.key == element.key">
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
  </div>
</template>

<script>
import FmUpload from './Upload'
import NewHopeUpload from './newHopeUpload/index.vue'
// import {
//   provinceAndCityData,
//   regionData,
//   provinceAndCityDataPlus,
//   regionDataPlus,
//   CodeToText,
//   TextToCode,
// } from 'element-china-area-data'

export default {
  props: ['element', 'select', 'index', 'data', 'remote'],
  components: {
    FmUpload,
    NewHopeUpload,
  },
  data() {
    return {
      selectWidget: this.select,
    }
  },
  mounted() {
    console.log('widget form item mounted')
    console.log(this.data)
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index]
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {}
        } else {
          this.selectWidget = this.data.list[index - 1]
        }
      } else {
        this.selectWidget = this.data.list[index + 1]
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    },
    handleWidgetClone(index) {
      const key =
        Date.parse(new Date().toString()) +
        '_' +
        Math.ceil(Math.random() * 99999)
      let cloneData = {
        ...this.data.list[index],
        options: {
          ...this.data.list[index].options,
          remoteFunc: 'func_' + key,
        },
        key,
        model: this.data.list[index].type + '_' + key,
        rules: this.data.list[index].rules || [],
      }

      if (
        this.data.list[index].type === 'radio' ||
        this.data.list[index].type === 'checkbox' ||
        this.data.list[index].type === 'select' ||
        this.data.list[index].type === 'refusecode'
      ) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map((item) => ({ ...item })),
          },
        }
      }

      this.data.list.splice(index, 0, cloneData)

      this.$nextTick(() => {
        this.selectWidget = this.data.list[index + 1]
      })
    },
    // areaOptions() {
    //   const { element } = this
    //   console.log('element::')
    //   console.log(element.options)
    //   if (element && element.type === 'area') {
    //     const { options } = element
    //     if (options.code === 'country') {
    //       return regionDataPlus
    //     } else if (options.code === 'city') {
    //       return provinceAndCityData
    //     }
    //   }
    //   return null
    // },
  },
  watch: {
    select(val) {
      this.selectWidget = val
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true,
    },
  },
}
</script>
